<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <title>Faeple</title>
    <!--[if lt IE 9]>
		<script src="/resources/js/html5shiv.js"></script>
		<script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    <!--[if lt IE 10]>
    	<script src="/resources/js/placeholders.min.js"></script>
    <![endif]-->
    <style type="text/css">
		#lastDataDis{
			text-align: center;
			width: 100%;
			height: 30px;
			position: relative;
			margin: 20px auto;
			display: none;
		}
		#lastDataDis h5{
			color: #808080;
			font-weight: bold;
		}
		#lastDataDis div{
			width: 100%;
			height: 2px;
			background-color: #ddd;
			border-bottom: 1px solid #ffffff;
		}
		#notLoadData{
			text-align: center;
			width: 100%;
			display: none;
		}
		.result-top-menu{
			width: 100%;
			height: 50px;
			border: 1px solid #ccc;
			border-radius: 4px;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
			background-color: #f4f4f4;
			overflow: hidden;
		}
		.result-line{
			position: absolute;
			top: 8px;
			left: 0;
			width: 100%;
			height: 2px;
		}
		.result-top-menu .result-count{
			color: #8d8d8d;
			margin-top: 20px;
			float: left;
			text-shadow: 1px 1px 0px rgba(255,255,255,1);
			display: none;
		}
		.result-top-menu .result-left-button{
			float: left;
		}
		.result-top-menu .result-left-button a{
			border-right: 1px solid #ccc;
			margin-left: -3px;
			display: inline-block;
			text-decoration: none;
		}
		.result-top-menu .result-right-button{
			float: right;
		}
		.result-top-menu .result-right-button button{
			border-left: 1px solid #ccc;
		}
		.result-top-menu button:hover{
			background-color: #fff;
			font-weight: bold;
			color: #353535;
		}
		.result-top-menu .result-btn{
			border: 0;
			background-color: #f4f4f4;
			padding: 16px 16px;
			color: #8d8d8d;
			text-shadow: 1px 1px 0px rgba(255,255,255,1);
			font-size: 13px;
		}
		.active{
			font-weight: bold!important;
			background-color: #fff!important;
			color: #353535!important;
		}
		/* ------------------------------------------------------------- */
		.profileBox{
			width: 100%;
			padding-bottom: 25px;
			margin-bottom: 25px;
			border-bottom: 1px solid #dfdfdf;
		}
		.profileBox > .profile-image{
			float: left;
			width: 120px;
			height: 120px;
		}
		.profileBox > .profile-image img{
			width: 100%;
			height: 100%;
		}
		.profileBox > .profile-info{
			float: left;
			margin-left: 20px;
		}
		.profileBox > .profile-info .profile-info-name{
			color: #292f33;
			font-size: 16px;
			font-weight: 400;
		}
		.profileBox > .profile-info .profile-info-name:hover{
			color: #3483c1;
		}
		.profileBox > .profile-info .profile-info-id{
			color: #afafaf;
			font-size: 12px;
			margin-left: 8px;
		}
		.profileBox > .profile-info .profile-info-description{
			font-size: 13px;
			color: #767676;
		}
		.profileBox > .profile-info i.followerCnt{
			font-size: 12px;
			color: #828282;
			position: relative;
			z-index: 2;
		}
		.profileBox > .profile-info i.followerCnt > i{
			font-size: 11px;
			color: #a8a8a8;
			position: absolute;
			top: 1px;
			left: 8px;
			z-index: -1;
		}
		.profileBox > .profile-info span{
			font-size:11px; color: #828282;
		}
		.proflie-follow{
			padding-left: 140px;
			clear: both;
			float: none;
		}
		.btn-follow{
			width: 76px;
			height: 30px;
			margin-top: -52px;
		}
		@media screen and (max-width: 768px){ .profile-image { width: 60px!important; height: 60px!important; } .btn-follow{ display: block; width:100%!important; margin-top:0; }  .proflie-follow{ padding-left:0; padding-top: 8px; } }
		/*--------------------------------------------------------------*/
		#q{width:160px!important;}
    </style>
</head>

<body>
<div id="viewport">
<div id="page">
<!-- header -->
<%@ include file="head.jsp" %>
<!-- header -->

<!-- content -->
<div class="container" style="margin: 10px auto;">
	<div style="text-align: center; margin-bottom: 35px;">
		<c:if test="${searchValue ne ''}">
			<h3 style="padding-top: 10px;">"<strong>${searchValue}</strong>" 검색 결과</h3>
		</c:if>
		<c:if test="${searchValue eq ''}">
			<h3 style="padding-top: 10px; font-weight: bold;">검색어를 입력해 주세요</h3>
		</c:if>
	</div>
	<div class="result-top-menu">
		<div class="result-left-button">
			<a href="/search/post?q=${searchValue}" class="result-btn" style="margin-left:0;">포스트</a>
			<a href="/search/tag?q=${searchValue}" class="result-btn">태그</a>
			<a href="/search/user?q=${searchValue}" class="result-btn active">사용자</a>
		</div>
		<div class="result-right-button">
			
		</div>
	</div>
</div> <!-- end container -->


<div class="container">
	<div style="position: relative; margin-top: 20px;">
		<div class="result-line"><div style="width:50px; height:2px; float:left;"></div><div style="margin:0 auto; overflow: hidden; height: 2px; background-color: #ddd; border-bottom: 1px solid #fff;"></div></div>
		<div class="result-count">총 <span style="color: #58778f; font-weight: bold;" id="resultSize">${searchCount}</span>명</div>
	</div>
	<div id="userList" style="margin-top:20px;">
		
	</div>
	<div id="mobile_more" style="width: 100%; height: 30px; text-align: center; cursor: pointer; padding-top:5px; text-shadow: 1px 1px 0px rgba(255,255,255,1); font-size: 13px; margin-bottom:25px; display: none;" class="btn-default"><img src="/resources/img/ajax-loader3.gif" style="display: none;">&nbsp;더보기</div>
</div>

<div class="container">
	<div id="loadingAjaxImg" style="text-align:center; display: none; margin-top:20px;"><img src="/resources/img/ajax-loader2.gif" /></div>
	<div id="lastDataDis"><div></div><h5><i class="glyphicon glyphicon-ok"></i>&nbsp;모두 불러왔습니다</h5></div>
	<div id="notLoadData">
		<p><i class="glyphicon glyphicon-remove" style="font-size:44px; color: #a2a2a2; text-shadow: 1px 1px 0px rgba(201,201,201,1);"></i>
		<h5>서버문제로 게시글을 불러올 수 없습니다</h5>
		<button onclick="location.reload(true)" class="btn btn-default btn-sm">다시시도</button>
	</div>
</div>
<div class="clearfix"></div>

<!-- footer -->
<%-- <jsp:include page = "footer.jsp" flush="false"/> --%>
<!-- footer -->
</div><!-- end page -->
<%@ include file="commonScript.jsp" %>
</div><!-- end viewport -->
<script src="/resources/js/modernizr.custom.js"></script>
<script src="/resources/js/masonry.pkgd.min.js"></script>
<script src="/resources/js/imagesloaded.js"></script>
<script src="/resources/js/classie.js"></script>
<script src="/resources/js/AnimOnScroll.js"></script>
<script type="text/javascript">
	//alert("<spring:message code="view.test" javaScriptEscape="true"/>");
	var index = 0;
	var hasPost = true;
	var member_idx = "${userDto.idx}";
	var member_id = "${userDto.id}";
	var member_name = "${userDto.name}";
	var member_profile = "${userDto.profileImage}";
	var is_mobile = isMobile();

   	$(function(){
   		$("#q").show().parent().addClass("q-focus");
   		loadUser();
   		if(is_mobile) $("#mobile_more").show();
   		$("#mobile_more").click(function(){
   			$("#mobile_more").children("img").show();
   			NProgress.set(0.0);
    		setTimeout(function(){
    			index += 20;
    			loadUser();
    		}, 500);
   		});
   	}); // end document
   	
    function loadUser() {
        $.ajax({
            type: "post",
            url: "/searchUser?index="+index+"&searchValue=${searchValue}",
            dataType: "json",
            timeout: 5000,
            error: function () {
            	$("#notLoadData").show();
            },
            success: function (response) {
                if (response == "" && index == 0) {
                	$("#mobile_more").hide();
                	$("#userList").html("<center><p><i class='fa fa-search-minus' style='font-size:45px; color: #7a7a7a;'></i><br><h4 class='nanum' style='font-weight: bold; color:#3A404C;'>검색된 사용자가 없습니다</h4></center>");
                	$("#resultSize").html("0");
                } else {
                    if(response != ""){
                    	if(parseInt("${searchCount}") < 20) hasPost = false;
                        for(var i = 0; i < response.length; i++){
                            var html ="<div class='profileBox'>";
                            html += "<div class='profile-image' title='"+response[i].name+"님 페이지 방문하기' data-toggle='tooltip'><a href='/"+response[i].id+"'><img src='/resources/upload/profile/thumbnail/"+response[i].profileImage+"'></a></div>";
                            var description = response[i].description;
                            if(description == null || description == "") description = "&nbsp;";
                            html += "<div class='profile-info'><p><a href='/"+response[i].id+"' class='profile-info-name'>"+response[i].name+"</a><span class='profile-info-id'>@"+response[i].id+"</span></p><p class='profile-info-description'>"+description+"</p><div><div style='float:left;'><a title='팔로워 "+response[i].followerCnt+"명' href='/"+response[i].id+"/followers' style='text-decoration:none;'><i class='glyphicon glyphicon-user followerCnt'><i class='glyphicon glyphicon-user'></i></i><span style='margin-left:10px;'>"+response[i].followerCnt+"</span></a></div><div style='background-color:#ccc;width:1px;height:12px; float:left; margin:4px 4px 0 4px;'></div><div style='float:left;margin-left:6px;' title='포스트 "+response[i].postCnt+"개'><a href='/"+response[i].id+"' style='text-decoration:none;'><i class='glyphicon glyphicon-picture postCnt' style='color:#828282;font-size:13px;'></i><span style='margin-left: 7px;'>"+response[i].postCnt+"</span></a></div><div class='clearfix'></div></div>";
                            if(response[i].followState == "unFollow"){
                            	html += "</div><div class='proflie-follow'><button type='button' class='btn btn-primary btn-sm btn-follow' onclick='profile_follow(this, \"follow\", "+response[i].idx+");'>팔로우</button></div>";
                            }else if(response[i].followState == "following"){
                            	html += "</div><div class='proflie-follow'><button type='button' class='btn btn-success btn-sm btn-follow' onclick='profile_follow(this, \"unfollow\", "+response[i].idx+");'><i class='fa fa-check'></i>&nbsp;팔로잉</button></div>";
                            }else{
                            	html += "</div><div class='clearfix'></div>";
                            }
                            html += "<div class='clearfix'></div></div>";
 			    			
			    			$("#userList").append(html);
                        }
                    }else{
                    	$("#mobile_more").hide();
                        $("#lastDataDis").show();
                        hasPost = false;
                    }
                }
                $('[data-toggle="tooltip"]').tooltip({
                    'placement': 'top',
                    'container': 'body',
                    'trigger': "hover"
                });
            },
            beforeSend: function () {
				if(!is_mobile) { $("#loadingAjaxImg").show(); }
            },
            complete: function () {
            	if(!is_mobile) {
            		$("#loadingAjaxImg").hide();
            	}else{
            		$("#mobile_more").children("img").hide();
            	}
            }
        });
    }
   	
    function coverImage(img,top){
    	$(img).css("top", ($(img).height()-90)*top/100);
    }
   	
   	$(window).scroll(function(event){
   		if(hasPost && !is_mobile){
   			if($(window).scrollTop() == $(document).height() - $(window).height()){
   	    		$("#loadingAjaxImg").show();
    			NProgress.set(0.0);
   	    		setTimeout(function(){
   	    			index += 20;
   	    			loadUser(index);
   	    		}, 500);
       		}
   		}
   	});
   	
   	function profile_follow(obj, type, idx) {
   		if("${userDto.idx}" == ""){
   			 alertShow("danger", "로그인이 필요합니다", 2000);
   		}else{
   			var data = "following_idx="+idx;
               if (type == "follow") {
               	$(obj).html("<img src='/resources/img/primary-btn-loading.gif'>");
               	setTimeout(function(){
               		$.ajax({
   	                    type: "post",
   	                    url: "/follow",
   	                    data: data,
   	                    dataType: "text",
   	                    timeout: 5000,
   	                    error: function () {
   	                        alertShow("danger", "다시 시도해주세요", 2000);
   	                    },
   	                    success: function (response) {
   	                        if (response == "success") {
   	                            $(obj).removeClass("btn-primary").addClass("btn-success").html("<i class='fa fa-check'></i>&nbsp;팔로잉").attr("onclick", "profile_follow(this, 'unfollow', "+idx+");").hide().fadeIn();
   	                        }else if (response == "closed") {
   	                            alertShow("danger", "팔로우를 받지 않는 사용자입니다", 2000);
   	                        }else if (response == "role") {
   	                            alertShow("danger", "로그인이 필요합니다", 2000);
   	                        }else {
   	                            alertShow("danger", "다시 시도해주세요", 2000);
   	                        }
   	                    },
   	                    complete: function(){
   	                    	
   	                    }
   	                });
               	}, 1000);
                   
               } else {
               	$(obj).html("<img src='/resources/img/success-btn-loading.gif'>");
               	setTimeout(function(){
               		$.ajax({
   	                    type: "post",
   	                    url: "/unFollow",
   	                    data: data,
   	                    dataType: "text",
   	                    timeout: 5000,
   	                    error: function () {
   	                        alertShow("danger", "다시 시도해주세요", 2000);
   	                    },
   	                    success: function (response) {
   	                        if (response == "fail") {
   	                            alertShow("danger", "다시 시도해주세요", 2000);
   	                        } else {
   	                            $(obj).removeAttr("data-state").removeClass("btn-success").addClass("btn-primary").attr("onclick", "profile_follow(this, 'follow', "+idx+");").html("팔로우").hide().fadeIn();
   	                        }
   	                    }
   	                });
               	}, 1000);
               }
   		}
        
    }
</script>
</body>
</html>